<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        姓名：
        <input type="text" v-model="userForm.uname" />
      </div>
      <div>
        性别：
        <input type="radio" :value="1" v-model="userForm.sex" />先生
        <input type="radio" :value="2" v-model="userForm.sex" />女士
      </div>
      <div>
        爱好：
        <input type="checkbox" value="html" v-model="userForm.hobby" />HTML
        <input type="checkbox" value="css" v-model="userForm.hobby" />CSS
        <input type="checkbox" value="js" v-model="userForm.hobby" />JS
        <input type="checkbox" value="vue" v-model="userForm.hobby" />VUE
        <input type="checkbox" value="hm" v-model="userForm.hobby" />鸿蒙
      </div>
      <div>
        城市：
        <select v-model="userForm.city">
          <option value="10">北京</option>
          <option value="1">芜湖</option>
          <option value="2">安庆</option>
          <option value="3">马鞍山</option>
          <option value="4">池州</option>
          <option value="5">太原</option>
          <option value="6">东北</option>
        </select>
      </div>
      <div>
        <button @click="saveUser">保存数据</button>
      </div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // 表单项数据使用此方案为了在提交时好去一次性获取全部数据
            userForm: {
              uname: '',
              sex: 1,
              // hobby:['js']
              hobby: [],
              city: '6'
            }
          }
        },
        methods: {
          saveUser() {
            console.log(this.userForm)
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
